<template>
  <div class="goods-details">
    <!-- 饮食介绍 -->
    <swiper :options="bannerOption" class="swiper-ad">
      <swiper-slide class="swiper-ad-img" v-for="(item, index) in 5" :key="index"><img src="@/assets/shangcheng06.png"></swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    <div class="info-p">
      <p class="title">备孕阶段过渡辛辣对身体有什么影响？</p>
      <p class="price"><span>￥</span>12.5 <s>¥268.00</s></p>  
      <div class="num">
        <span class="tip">数量选择</span>
        <div class="operate">
          <span @click="jian"><img src="@/assets/gouwuche06.png"></span>
          <span class="pay_num">{{num}}</span>
          <span @click="jia"><img src="@/assets/gouwuche07.png"></span>
        </div>
      </div>
    </div>
    <div class="details">
      <p>商品详情</p>
      <img src="@/assets/shipinxiangqing07.png">
    </div>
    <div class="btn">
      <div class="cart" @click="router({path: './cart'})">
        <img src="@/assets/shangpinxiangqing04.png" alt="">
        <i>1</i>
      </div>
      <span class="btn-flex left">加入购物车</span>
      <span class="btn-flex right" @click="router({path: './goodsConfirmOrder'})">立即购买</span>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    swiper, 
    swiperSlide
  },
  data () {
    return {
      num: 1,
      bannerOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true,
        observer:true,
        observeParents:true,
      },
    }
  },
  created () {
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    jian () {
      if(this.num <= 1) {
        return 
      }
      this.num--
    },
    jia () {
      this.num++
    }
  }
}
</script>
<style lang="stylus" scoped>
  .goods-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .info-p
      background-color #fff
      margin-bottom 1rem
      padding 2rem 1.5rem
      .title
        line-height 2.4rem
        font-size 1.5rem
        color #333
        font-weight bold
      .price
        color #D03718
        font-weight bold
        font-size 1.7rem
        margin-top 1rem
        span
          font-size 1.3rem
          font-weight 400
        s
          color #ccc
          font-size 1.3rem
          font-weight 400
          margin-left .5rem
      .num
        border-top 1px solid #e5e5e5
        margin-top 2rem
        display flex
        padding-top 3rem
        padding-bottom 1rem
        position relative
        .tip
          line-height 2.7rem
          font-size 1.5rem
          color #999
        .operate
          display flex
          flex 1
          position absolute
          right 0
          top 2.5rem
          span
            display block
            flex 1
            max-width 3.7rem
            max-height 3.7rem
            width 3.7rem
            height 3.7rem
            box-sizing border-box
            border 1px solid #e5e5e5
            text-align center
            line-height 3.7rem
            img
              width 1.3rem
              display inline-block
              vertical-align middle
              position relative
              top -.2rem
          .pay_num
            border none
            text-align center
            line-height 3.7rem    
            max-width 4.6rem      
            width 4.6rem
            border-top 1px solid #e6e6e6
            border-bottom 1px solid #e6e6e6
            box-sizing border-box
            font-size 1.7rem
            color #A81E27
    .details
      padding 2rem 1.5rem
      background-color #fff
      margin-bottom 6.4rem
      p
        font-size 1.6rem
        color #333
        font-weight bold
        margin-bottom 1rem
    .btn
      background-color #FFF
      line-height 5rem
      text-align center
      height 5rem
      position fixed
      bottom 0
      width 100%
      display flex
      border-top 1px solid #e6e6e6
      .cart
        width 7.5rem
        max-width 7.5rem
        border-right 1px solid #e6e6e6
        box-sizing border-box
        position relative
        img
          width 2.2rem
          position relative
          left 50%
          margin-left -1.1rem
          top 1.5rem
        i
          position absolute
          width 1.4rem
          font-size .9rem
          line-height 1.4rem
          text-align center
          border .1rem solid #fff
          border-radius 50%
          top .9rem
          color #fff
          right 1.7rem
          background-color #D03718
      .btn-flex
        flex 1
        font-size 1.5rem
        font-weight 500
      .left
        color #172F6D
      .right
        color #fff
        background-color #172F6D
</style>